import 'package:flutter/material.dart';
import 'package:love_app/common/su.dart';
import 'package:love_app/pages/community/attention.dart';
import 'package:love_app/pages/community/latest.dart';
import 'package:love_app/pages/community/recommend.dart';
import 'package:love_app/pages/community/search.dart';
import 'package:love_app/pages/community/ui/top_common.dart';
import 'package:love_app/providers/community_provider.dart';
import 'package:love_app/providers/recommend_provider.dart';
import 'package:love_app/providers/share_provider.dart';
import 'package:love_app/routes/application.dart';
import 'package:love_app/routes/fluro_convert_util.dart';
import 'package:love_app/routes/route.dart';
import 'package:provider/provider.dart';

class CommunityPage extends StatefulWidget {
  @override
  _CommunityPageState createState() => _CommunityPageState();
}

class _CommunityPageState extends State<CommunityPage> {
  PageController _pageController;
  // int _currentIndex; // 维护一个下标
  ShareProvider _shareProvider; // 全局共享数据
  CommunityProvider _communityProvider; // 社区页面共享数

  // 所有页面
  final List<Widget> _pages = [
    Recommend(), // 推荐页面
    Latest(), // 最新页面
    Attention(), // 关注页面
  ];

  @override
  void initState() {
    // _currentIndex = 0; // 初始化下标
    _pageController = PageController(initialPage: 0);
    super.initState();
  }

  // 只执行一次， 用来获取共享数据
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _shareProvider = Provider.of<ShareProvider>(context, listen: false);
    _communityProvider = Provider.of<CommunityProvider>(context, listen: false);
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double topHeight = MediaQuery.of(context).padding.top; // 好像是获取刘海搞定
    return Scaffold(
      body: _body(topHeight),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final String apiPath = "community_log;"; // 发表恋人动态
          final String appBarTitle =
              FluroConvertUtils.fluroCnParamsEncode("发表社区动态");
          Application.router.navigateTo(context,
              "/addLoveDynamic?apiPath=$apiPath&appBarTitle=$appBarTitle");
        },
        backgroundColor: _shareProvider.textColor,
        tooltip: "发表社区动态",
        child: Icon(
          Icons.add,
          color: Colors.white,
          size: Su().w(70),
        ),
      ),
    );
  }

  // 内容
  Widget _body(double topHeight) {
    return Container(
      child: Column(
        children: <Widget>[
          _topCentent(topHeight),
          Expanded(
            child: _indexPage(),
          ),
        ],
      ),
    );
  }

  Widget _topCentent(double topHeight) {
    return Container(
      width: Su().w(750),
      // height: Su().h(199),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: _shareProvider.themeColor,
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _searchInpute(topHeight),
          _allItem(),
        ],
      ),
    );
  }

  // 当前页面
  Widget _indexPage() {
    return Container(
      // height: Su().h(400),
      child: PageView(
        controller: _pageController,
        children: _pages,
        onPageChanged: (int index) {
          _communityProvider.currentIndex = index;
        },
      ),
    );
  }

  // 搜索框
  Widget _searchInpute(double topHeight) {
    return InkWell(
      onTap: (){
        showSearch(context: context,delegate: CommunitySearch());
      },
      child: Container(
        width: Su().w(689),
        height: Su().h(63),
        margin: EdgeInsets.only(
          top: topHeight,
        ),
        decoration: BoxDecoration(
          color: Color.fromRGBO(255, 255, 255, 0.2),
          borderRadius: BorderRadius.circular(Su().w(32)),
        ),
        child: Stack(
          alignment: Alignment.centerLeft,
          children: <Widget>[
            _leftIconAndText(),
          ],
        ),
      ),
    );
  }

  // 左边文字和图标
  Widget _leftIconAndText() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        _leftIcon(),
        _leftText(),
      ],
    );
  }

  // 左边搜索按钮
  Widget _leftIcon() {
    return Container(
      padding: EdgeInsets.only(
        left: Su().w(20),
      ),
      child: Icon(
        Icons.search,
        color: Colors.white,
        size: Su().w(33),
      ),
    );
  }

  // 文字
  Widget _leftText() {
    return Container(
      padding: EdgeInsets.only(
        left: Su().w(15),
      ),
      child: Text(
        "搜索",
        style: Su().textStyle(Colors.white, 28),
      ),
    );
  }

  // 所有item
  Widget _allItem() {
    return Container(
      height: Su().h(88),
      width: Su().w(750),
      child: Row(
        children: _rowChildren(),
      ),
    );
  }

  // 所有item
  List<Widget> _rowChildren() {
    return [
      _expandedEveryItem("推荐", 0),
      _expandedEveryItem("最新", 1),
      _expandedEveryItem("关注", 2),
    ];
  }

  // 每个item平均分配
  Widget _expandedEveryItem(name, index) {
    return Expanded(
      flex: 1,
      child: InkWell(
        onTap: () {
          // 点击自定义的Tarbar实现跳转
          _pageController.animateToPage(
            index,
            duration: new Duration(milliseconds: 500),
            curve: new ElasticOutCurve(4),
          );
          _communityProvider.currentIndex = index;
        },
        child: _textItem(name, index),
      ),
    );
  }

  // 每个item
  Widget _textItem(String name, int index) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          child: Text(
            name,
            style: Su().textStyle(Colors.white, 36),
          ),
        ),
        // 蓝色下划线
        Consumer<CommunityProvider>(
          builder: (context, CommunityProvider communityPrivder, _) =>
              Container(
            width: Su().w(67),
            height: Su().h(5),
            color:
                index == _communityProvider.currentIndex ? Colors.white : null,
            margin: EdgeInsets.only(
              top: Su().h(8),
            ),
          ),
        ),
      ],
    );
  }
}
